<template>
  <div class="min-h-screen flex items-center justify-center">
    <div class="max-w-md w-full mx-auto p-4">
      <UCard class="p-6 bg-blend-darken shadow-md rounded-lg">
        <template #header>
          <div class="flex justify-between items-center">
            <h1 class="text-2xl font-bold mb-1">待办事项</h1>
            <UButton 
              label="退出登录" 
              color="gray" 
              variant="ghost" 
              @click="handleLogout"
            />
          </div>
        </template>
        <div class="mb-2">
          <UInput v-model="newTask" placeholder="输入新任务" class="mr-2" />
          <UButton label="添加任务" color="primary" @click="addTask" />
        </div>
        <div class="space-y-4">
          <div v-for="task in tasks" :key="task.id" class="flex items-center p-0.5 border-b border-gray-200">
            <UCheckbox v-model="task.completed" @change="updateTask(task)" class="mr-2" />
            <span v-if="!isEditing[task.id]" :class="{ 'line-through': task.completed }">{{ task.title }}</span>
            <UInput v-else v-model="editedTask" class="mr-2 flex-1" />
            <UButton v-if="!isEditing[task.id]" label="编辑" size="xs" color="secondary" class="ml-2" @click="startEdit(task)" />
            <UButton v-else label="保存" size="xs" color="success" class="ml-2" @click="saveEdit(task)" />
            <UButton label="删除" size="xs" color="error" class="ml-2" @click="deleteTask(task.id)" />
          </div>
        </div>
      </UCard>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Supabase 设置
const supabase = useSupabaseClient();
const user = useSupabaseUser()

// 如果未认证则重定向到登录页，认证后获取任务
watch(user, (newUser) => {
  if (!newUser) {
    navigateTo('/login')
  } else {
    fetchTasks()
  }
}, { immediate: true })
const newTask = ref('');
const tasks = ref([]);
const isEditing = ref({});
const editedTask = ref('');

/**
 * 添加新任务
 * 验证输入内容并将新任务插入到数据库中
 */
async function addTask() {
  if (newTask.value.trim() && user.value) {
    const { error } = await supabase.from('tasks').insert({
      title: newTask.value,
      completed: false,
      user_id: user.value.id
    });
    if (error) console.error(error);
    else newTask.value = '';
    await fetchTasks();
  }
}

/**
 * 更新任务状态
 * 切换任务的完成状态并同步到数据库
 */
async function updateTask(task) {
  const { error } = await supabase.from('tasks').update({ completed: task.completed }).eq('id', task.id);
  if (error) console.error(error);
  else await fetchTasks();
}

/**
 * 删除任务
 * 从数据库中删除指定的任务
 */
async function deleteTask(id) {
  const { error } = await supabase.from('tasks').delete().eq('id', id);
  if (error) console.error(error);
  else await fetchTasks();
}

/**
 * 开始编辑任务
 * 将任务设置为编辑模式并初始化编辑内容
 */
function startEdit(task) {
  isEditing.value[task.id] = true;
  editedTask.value = task.title;
}

/**
 * 保存编辑的任务
 * 将编辑后的任务内容保存到数据库并退出编辑模式
 */
async function saveEdit(task) {
  if (editedTask.value.trim()) {
    const { error } = await supabase.from('tasks').update({ title: editedTask.value }).eq('id', task.id);
    if (error) console.error(error);
    else {
      isEditing.value[task.id] = false;
      await fetchTasks();
    }
  }
}

/**
 * 获取用户任务列表
 * 从数据库中获取当前用户的所有任务
 */
async function fetchTasks() {
  if (!user.value) return;
  console.log('Fetching tasks for user:', user.value.id);
  const { data, error } = await supabase
    .from('tasks')
    .select('*')
    .eq('user_id', user.value.id);
  console.log('Tasks data:', data, 'Error:', error);
  if (error) console.error('Error fetching tasks:', error);
  else tasks.value = data || [];
}

/**
 * 处理用户退出登录
 * 清除用户会话并重定向到登录页面
 */
async function handleLogout() {
  const { error } = await supabase.auth.signOut()
  if (error) {
    console.error('Error logging out:', error)
  } else {
    await navigateTo('/login')
  }
}

// fetchTasks 现在在用户监听器中调用
</script>